<template>
	<div>
		<!-- 添加二级分类模态框模态框 -->
		<el-dialog style="text-align: left;" title="添加二级菜单" :visible.sync="addProclassTwo" width="30%">
			<el-row>
				<el-input placeholder="请输入二级分类名称" v-model="proName" class="input-with-select">
					<span slot="prepend">分类名：</span>
				</el-input>
			</el-row>
			<!-- 添加一次分类【父Id】 -->
			<el-row>
				<el-col :span="24">
					<br />
					<span>一级分类选择：</span>
					<el-select v-model="proclassOne" clearable placeholder="请选择">
						<el-option v-for="proclass in proclassOnes" :key="proclass.iId" :label="proclass.proName" :value="proclass.iId"></el-option>
					</el-select>
				</el-col>
			</el-row>
			<span slot="footer" class="dialog-footer">
				<el-button @click="addProclassTwo = false">取 消</el-button>
				<el-button type="primary" @click="AddProclassTwo()">确 定</el-button>
			</span>
		</el-dialog>

		<el-container>
			<el-header>
				<el-row style="text-align: center; margin-top: 10px; margin-bottom: 20px;">
					<!-- 新增二级分类 -->
					<el-col :span="4">
						<el-button size="small" type="success" @click="findGetProclassOnes()">新增</el-button>
					</el-col>
					<!-- 批量删除按钮 -->
					<el-col :span="4">
						<el-button size="small" type="danger" @click="DeleteProclassTwosByIIid()">删除</el-button>
					</el-col>
					<el-col :span="8" :offset="8">
						<!-- 根据二级分类名称查询 -->
						<el-input placeholder="请输入二级分类名称" v-model="conditionProName" class="input-with-select">
							<el-button slot="append" icon="el-icon-search" @click="SelectProclassTwoByProName()"></el-button>
						</el-input>
					</el-col>
				</el-row>
			</el-header>
			<el-main style="height: 465px; overflow: hidden; background: white; border:1px solid white ; border-radius: 8px; margin-top: 10px;">
				<!-- 表格设置 -->
				<template>
					<el-table ref="table" border stripe :data="proclassTwos" style="width: 100%" @selection-change="handleSelectionChang">
						<el-table-column header-align="center" align="center" type="selection"></el-table-column>
						<el-table-column prop="iiId" label="二级分类编号">
						</el-table-column>
						<el-table-column prop="proName" label="二级分类名称">
						</el-table-column>
						<el-table-column prop="iId" label="父级分类编号">
						</el-table-column>
						<el-table-column prop="parentLevelProName" label="父级分类名称">
						</el-table-column>
						<el-table-column label="操作" width="200px">
							<template slot-scope="scope">
								<el-button type="danger" size="mini" @click.native.prevent="DeleteProclassTwoByIIid(scope.row)">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
				</template>
				<template>
					<!--@size-change：当条数发现改变时触发-->
					<!--@current-change：当页码发生改变时触发-->
					<el-pagination style="margin-top: 5px;" layout="sizes, prev, pager, next, jumper, ->, total" :total="total"
					 :page-size.sync="pageSize" :page-sizes="pageSizes" :current-page.sync="currentPage" :pager-count="pagerCount"
					 background @size-change="handleSizeChange" @current-change="handleCurrentChange">
					</el-pagination>
				</template>
			</el-main>
		</el-container>
	</div>
</template>

<script>
	export default {
		name: 'productTwo',
		data() {
			return {
				/* 所有的二级分类 */
				proclassTwos: [],
				/* 二级分类名称 */
				proName: '',
				/* 从数据库中查询所有的一级分类 */
				proclassOnes: [],
				/* 拿到当前用户选择添加的一级分类 */
				proclassOne: '',
				/* 用于绑定根据二级分类名称查询 */
				conditionProName: '',
				/* 模态框是否显示 */
				addProclassTwo: false,
				total:1, //总条数
				pageSize: 5, //每页显示多少条
				pageSizes: [2, 3, 5], //每页显示条数候选值
				currentPage: 1, //当前页
				pagerCount: 5, //最多显示的页码，多余的会折叠
				/* 用户选择的行的编号，用于批量删除 */
				selections: [],
				/* 传入数据库的iId数组 */
				iiIds:[],
				/* 当前时间 */
				nowTime: '',
			}
		},
		mounted: function() {
			/* 页面加载时启动计时器 */
			this.currentTime();
			/* 查询当前页所有的二级分类 */
			this.SelectProclassTwoByProName();
		},
		methods: {
			/*
			 * 可以根据条件查询一级分类也可以不根据查询一级分类
			 * this.pageSize			每页显示的条数
			 * this.currentPage			当前页码
			 * this.conditionProName	需要查询的分类名称
			 */
			SelectProclassTwoByProName() {
				var params = {
					"pageNum": this.currentPage,
					"pageSize": this.pageSize,
					"proName": this.conditionProName,
				};
				
				this.$http.post("design/procalssTwo/getProcalssTwos",this.$qs.stringify(params)).then(res => {
					console.log(res.data);
					//设置当前页数据
					this.proclassTwos = res.data.rows;
					//总页码设置
					this.total = res.data.total;
				})
			},
			
			/* 显示模态框，并且将一级分类信息查出 */
			findGetProclassOnes(){
				this.addProclassTwo = true;
				this.$http.post("design/proclassOne/getFindOneCslassifyAll").then(res => {
					this.proclassOnes = res.data;
				})
			},

			/*
			 * 添加二级分类
			 * this.proclassOne:一级分类编号
			 * this.proName:二级分类名称
			 */
			AddProclassTwo() {
				this.$http.post("design/procalssTwo/getInsertProcalssTwoByProName","proName=" + this.proName + "&iId=" + this.proclassOne).then(res => {
					if (res.data > 0) {
						/* 刷新数据 */
						this.SelectProclassTwoByProName();
						this.$message.success('添加二级菜单成功！');
						/* 关闭模态框 */
						this.addProclassTwo = false;
						/* 清空文本框 */
						this.proName = '';
					} else {
						/* 刷新数据 */
						this.SelectProclassTwoByProName();
						this.$message.error('添加二级分类失败！');
						/* 关闭模态框 */
						this.addProclassTwo = false;
						/* 清空文本框 */
						this.proName = '';
					}
				})
			},

			/*
			 * 批量删除二级分类
			 */
			DeleteProclassTwosByIIid() {
				/* 循环解析选中的行，取出id值 */
				if(this.selections.length > 0){
					for (var i = 0; i < this.selections.length; i++) {
						this.iiIds[i] = this.selections[i].iiId;
					}
				}
				/* 数据库批量删除 */
				this.$http.post("design/procalssTwo/getdeleteInBatchesProcalssTwoByIIds", "iiIds=" + this.iiIds).then(res => {
					this.SelectProclassTwoByProName();
					if (res.data > 0) {
						/* 刷新数据 */
						this.$message.success('删除二级菜单成功！');
						if((this.total - this.iIds.length) % this.pageSize == 0 && this.currentPage != 1){
							this.currentPage = this.currentPage-1;
						}
					} else {
						/* 刷新数据 */
						this.$message.error('删除二级分类失败！');
					}
				})
			},
			
			/**
			 * 删除二级菜单[单个]
			 */
			DeleteProclassTwoByIIid(row){
				this.iiIds[0] = row.iiId;
				/* 调用批量删除 */
				this.DeleteProclassTwosByIIid();
				/* 刷新数据 */
				this.SelectProclassTwoByProName();
			},

			/* 改变size[每页条数]调用方法*/
			handleSizeChange(size) {
				/* 只要改变马上调用分页查询 */
				this.SelectProclassTwoByProName();
			},

			/* 改变page[当前页码]调用方法*/
			handleCurrentChange(page) {
				/* 只要改变马上调用分页查询 */
				this.SelectProclassTwoByProName();
			},

			/* 获取当前用户选择的行 */
			handleSelectionChang(value) {
				this.selections = value;
			},
			
			/* 定时器 */
			currentTime() { //定时器
				setInterval(this.getDate, 100)
			},
			
			/* 获取当前时间 */
			getDate() {
				const year = new Date().getFullYear()
				const month = new Date().getMonth() + 1 < 10 ? '0' + (new Date().getMonth() + 1) : (new Date().getMonth() + 1)
				const date = new Date().getDate() < 10 ? '0' + new Date().getDate() : new Date().getDate()
				const hh = new Date().getHours() < 10 ? '0' + new Date().getHours() : new Date().getHours()
				const mm = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes()
				const ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds()
				const week = new Date().getDay()
				this.nowTime = year + '年' + month + '月' + date + '日' + ' ' + hh + ':' + mm + ':' + ss
			}
		},
		// 销毁定时器
		beforeDestroy: function() {
			if (this.getDate) {
				clearInterval(this.getDate) // 在Vue实例销毁前，清除时间定时器
			}
		},
	}
</script>

<style scoped>
	.el-header {
		background-color: #333333;
	}
</style>
